<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition router unique-opened
           class="el-menu-vertical-demo" background-color="#2F4050" text-color="#fff" active-text-color="#FFFFFF">
    <div class="logobox" style="height: 20px; background-color: #357CA5; display: flex; justify-content: center; align-items: center;">
      <span style="font-size: 22px; color: white; font-family: 楷体; font-weight: bold;">中文店铺名称识别系统</span>
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <i class="iconfont" :class="menu.icon"></i>
        <span>{{ menu.menuname }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
          <i class="iconfont" :class="chmenu.icon"></i>
          <span>{{ chmenu.menuname }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    let res = {
      success: true,
      data: [],
      msg: 'success'
    }

    let routerList = [
      {
        userType: '1',
        icon: 'li-icon-xiangmuguanli',
        menuname: '用户管理',
        menus: [{
          userType: '1',
          icon: 'icon-cat-skuQuery',
          menuname: '用户管理',
          url: 'user/userList'
        }
        ]
      },
      {
        userType: '12',
        icon: 'li-icon-xiangmuguanli',
        menuname: '店铺管理',
        menus: [
          {
            userType: '12',
            icon: 'icon-cat-skuQuery',
            menuname: '店铺管理',
            url: 'store/store'
          },
          {
            userType: '12',
            icon: 'icon-cat-skuQuery',
            menuname: '店铺留言',
            url: 'store/storeList'
          }
        ]
      },
      {
        userType: '12',
        icon: 'li-icon-xiangmuguanli',
        menuname: '通知管理',
        menus: [
          {
            userType: '1',
            icon: 'icon-cat-skuQuery',
            menuname: '通知管理',
            url: 'notice/notice'
          },
          {
            userType: '2',
            icon: 'icon-cat-skuQuery',
            menuname: '通知管理',
            url: 'notice/noticeUser'
          }
        ]
      },
      {
        userType: '1',
        icon: 'li-icon-xiangmuguanli',
        menuname: '统计分析',
        menus: [
          {
            userType: '1',
            icon: 'icon-cat-skuQuery',
            url: 'statistic/type',
            menuname: '店铺类型分析',
          },
          {
            userType: '1',
            icon: 'icon-cat-skuQuery',
            url: 'statistic/scale',
            menuname: '店铺规模分析',
          },
          {
            userType: '1',
            icon: 'icon-cat-skuQuery',
            url: 'statistic/address',
            menuname: '店铺位置分析',
          }
        ]
      }
    ];

    //权限控制
    routerList.forEach(item => {
      let userType = window.localStorage.getItem("userType");
      if (item.userType.indexOf(userType) > -1) {
        item.menus.forEach((menu, index) => {
          if (menu.userType.indexOf(userType) == -1)
            item.menus.splice(index, 1);
        })
        if (item.menus && item.menus.length > 0) {
          res.data.push(item)
        }
      }
    })

    this.allmenu = res.data
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}

/* 一级菜单项不变色 */
.el-menu-item {
  background-color: transparent !important;
}

/* 仅修改二级菜单项的悬浮和选中背景色 */
.el-menu-item:hover,
.el-menu-item.is-active {
  background-color: #1890FF !important; /* 蓝色背景 */
  color: white !important; /* 确保文字是白色的 */
}

.el-submenu .el-menu-item:hover,
.el-submenu .el-menu-item.is-active {
  background-color: #1890FF !important; /* 蓝色背景 */
  color: white !important; /* 确保文字是白色的 */
}
/* 一级菜单项不变色 */
.el-menu-item {
  background-color: transparent !important;
}

/* 仅修改二级菜单项的悬浮和选中背景色 */
.el-menu-item:hover,
.el-menu-item.is-active {
  background-color: #1890FF !important; /* 蓝色背景 */
  color: white !important; /* 确保文字是白色的 */
}

.el-submenu .el-menu-item:hover,
.el-submenu .el-menu-item.is-active {
  background-color: #1890FF !important; /* 蓝色背景 */
  color: white !important; /* 确保文字是白色的 */
}
</style>
